<template>
	<view class="alone" v-for="article in articList" :key="article._id" @click="gotoDetail(article._id)">
		<div class="card">
			<!-- title 部分 -->
			<div class="blog-title">
				<img :src="article.author.img" width="40" height="40" alt="" />
				<div class="user-name">
					{{ article.author.name }}
				</div>
				<div class="create-time">
					{{ getTimeAgo(article.publishedAt) }}
				</div>
			</div>

			<!-- blog body 部分 -->
			<div class="blog-body">
				<div class="body-title">{{ article.title }}</div>
				<div class="body-tip" style="white-space: pre-wrap;">
					{{ article.summary }}
				</div>
			</div>
			<!-- 点赞评论 部分 -->
			<div class="blog-footer">
				<div class="operation-icon">
					<wd-icon name="chat1" size="36rpx"></wd-icon>
					<div>{{ article.view_count }}</div>
				</div>
				<div class="operation-icon" :class="article.isLike ? 'active' : ''"
					@click.stop="onLike(article._id)">
					<wd-icon name="thumb-up" size="34rpx"></wd-icon>
					<div>{{ article.like_count ? article.like_count : "点赞" }}</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
export default {
		data() {
			if (!this.hasNavigated) {
			  this.hasNavigated = true; // 设置跳转标志
				this.uid = uni.getStorageSync('uid');
				if (this.uid==''){
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			}
			return {
				uid:'',
				hasNavigated:false,
				isShow: true,
				articList:[]
			};
		},
		methods: {
			getTimeAgo(date) {
				const now = new Date();
				
				// 确保传入的时间是本地时间
				const inputDate = new Date(date);
							
				// 获取两个时间的时间戳
				const diffInMilliseconds = now.getTime() - inputDate.getTime();
				const diffInMillisecondsWith8Hours = diffInMilliseconds + (8 * 60 * 60 * 1000);
				const seconds = Math.floor(diffInMillisecondsWith8Hours / 1000);
				const minutes = Math.floor(seconds / 60);
				const hours = Math.floor(minutes / 60);
				const days = Math.floor(hours / 24);
				if (days > 0) return `${days}天前`;
				if (hours > 0) return `${hours}小时前`;
				if (minutes > 0) return `${minutes}分钟前`;
				return `${seconds}秒前`;
			},
			// 获取文章数据
			async loadPosts() {
				this.isLoading = true;

				try {
					this.uid = uni.getStorageSync('uid');
					const res = await new Promise((resolve, reject) => {
						uni.request({
							url: 'http://14.103.233.198:9999/getpost', // 替换为实际的接口
							method: 'POST',
							data: {
								uid: this.uid,
							},
							success: (response) => resolve(response),
							fail: (error) => reject(error),
						});
					});

					// Check if 'articles' is defined and is an array
					const articles = res.data.data.articles;
					this.articList.push(...articles);

				} catch (error) {
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				} finally {
					this.$nextTick(() => {
						this.$forceUpdate(); // 强制触发 Vue 更新视图
					});
				}
			},
			gotoDetail(articleId) {
				uni.navigateTo({
					url: `/pages/postDetail/postDetail?id=${articleId}`
				});
			},
		},

		mounted() {
			this.loadPosts(this.active); // 页面加载时初始化第一个 tab 的数据
		}
	};
</script>

<style scoped>
	.content {
		padding: 20px;
	}

	.main {
		padding: 10px;
	}

	.alone {
		margin-bottom: 10px;
	}

	.load-text {
		text-align: center;
		padding: 10px;
		color: #888;
		font-size: 14px;
	}
</style>
<style lang="scss" scoped>
	.card {
		border: 1px solid #ccc;
		border-radius: 8px;
		overflow: hidden;
		margin: 16px;
		background-color: white;
	}

	.blog-title {
		display: flex;
		align-items: center;
		padding: 12px;
		border-bottom: 1px solid #f0f0f0;
	}

	.blog-title img {
		border-radius: 50%;
		margin-right: 10px;
	}

	.user-name {
		font-size: 14px;
		font-weight: bold;
	}

	.create-time {
		font-size: 12px;
		color: #888;
	}

	.more-action {
		margin-left: auto;
		font-size: 18px;
		cursor: pointer;
	}

	.blog-body {
		padding: 12px;
	}

	.body-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 8px;
	}

	.body-tip {
		font-size: 14px;
		color: #777;
		margin-bottom: 12px;
	}

	.body-image img {
		width: 100%;
		height: auto;
		margin-bottom: 8px;
	}

	.blog-footer {
		display: flex;
		padding: 12px;
		border-top: 1px solid #f0f0f0;
	}

	.operation-icon {
		display: flex;
		align-items: center;
		margin-right: 20px;
		font-size: 14px;
	}

	.operation-icon .icon {
		margin-right: 5px;
	}

	.operation-icon.active {
		color: #007aff;
	}

	.wd-tabs {
		margin-top: -20px;
		/* 根据需要调整值 */
	}

	.scroll-view {
		margin-top: 0;
		/* 设置为0，去除顶部间隙 */
		padding-top: 0;
	}

	@import "@/pages/tabbar/tabbar-1/tabbar-1.scss"
</style>